import { useEffect, useState } from 'react'
import Axios from '../services/request'

import Head from 'next/head'

import AppLayout from '../components/app-layout';
import HomeBanner from '../components/home-banner';
import HomeList from '../components/home-list'
import HomeMyInfo from '../components/home-myinfo'
import HomeTags from '../components/home-tags'
import HomeNews from '../components/home-news'


import style from '../styles/home.module.scss'
import { Pagination } from 'antd';

export default function Home() {
  const [momentList, setMomentList] = useState([])
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [typeid, setTypeid] = useState(null)
  const getMoments = (params) => {
    let url = `/api/moment?page=${params.page}&size=${params.size}`
    if (params.typeid) {
      url += `&type_id=${params.typeid}`
    }
    Axios.get(url).then(res => {
      setMomentList(res.data.data)
      setTotal(res.data.total)
    })
  }
  //分页
  const pageChange = e => {
    setPage(e)
  }
  useEffect(() => {
    getMoments({ page, size: 5, typeid })
  }, [page, typeid])
  return (
    <AppLayout>
      <Head>
        <title>Reaper's blog</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <HomeBanner />
      <div className={style.content}>
        <div className={style.content_left}>
          <HomeList momentList={momentList} />
          <Pagination current={page} pageSize={5} total={total} onChange={e => { pageChange(e) }} />
        </div>

        <div className={style.content_right}>
          <HomeMyInfo />
          <HomeTags handleClick={setTypeid} handlePage={setPage} total={total} />
          <HomeNews />
        </div>
      </div>
    </AppLayout>
  )
}
